<template>
  <!-- 特斯拉各省销量地图 -->
  <div id="tslmap"  style="width: 800px; height: 450px"></div>
</template>

<script>
export default {
  methods: {
    initByd() {
      var myChart = this.$echarts.init(document.getElementById('tslmap'));
      // 进行相关配置
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: 'auto'
        }, 
        title: {
          show:true,
          text: '全国销量情况',
          left: 'auto',
          textStyle: {
            color: 'orange'
          }
        }, 
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          type: 'map',
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true,
            color: 'white'
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            borderColor: "rgba(0, 0, 0, 0.2)",
            emphasis: {
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "map",
            map: 'china',
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据（下面是定义的假数据）
            data: [
              { name: "湖南", value: 28 },
              { name: "北京", value: 62 },
              { name: "上海", value: 91 },
              { name: "江西", value: 15 },
              { name: "河南", value: 21 },
              { name: "山西", value: 8 },
              { name: "四川", value: 41 },
              { name: "湖北", value: 29 },
              { name: "江苏", value: 90 },
              { name: "内蒙古", value: 1 },
              { name: "安徽", value: 17 },
              { name: "辽宁", value: 16 },
              { name: "广东", value: 135 },
              { name: "浙江", value: 97 },
              { name: "台湾", value: 0 },
              { name: "陕西", value: 24 },
              { name: "贵州", value: 7 },
              { name: "山东", value: 33 },
              { name: "云南", value: 11 },
              { name: "广西", value: 9 },
              { name: "吉林", value: 6 },
              { name: "重庆", value: 14 },
              { name: "黑龙江", value: 0 },
              { name: "海南", value: 4 },
              { name: "新疆", value: 3 },
              { name: "福建", value: 30 },
              { name: "河北", value: 10 },
              { name: "天津", value: 11 },
              { name: "宁夏", value: 3 },
              { name: "甘肃", value: 2 },
              { name: "青海", value: 0 },
              { name: "西藏", value: 0 },
            ],
          },
        ],
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
           formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
             let localValue, perf, downloadSpeep, usability, point;
             if (params.data) {
                 localValue = params.data.value;
             } else {
               // 为了防止没有定义数据的时候报错写的
                 localValue = 0;
             }
             let htmlStr = `
             <div style='font-size:14px;'> ${params.name}</div>
             <br/>
             <p style='text-align:left;margin-top:-10px;'>
               销量：${localValue}<br/>
             </p>
           `;
             return htmlStr;
           },
           backgroundColor:"#ff7f50",//提示标签背景颜色
           textStyle:{color:"#fff"} //提示标签字体颜色
        },
        // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
        visualMap: {
          // 左下角的颜色区域
          type: "piecewise", // 定义为分段型 visualMap
          min: 0,
          max: 1000,
          itemWidth: 40,
          bottom: 10,
          left: 10,
          textStyle: {
            color: 'white'
          },
          pieces: [
            // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，
            // 以及每一段的文字，以及每一段的特别的样式
            { gt: 100, label: ">100", color: "#f31124" }, // (1000, ]
            { gte: 50, lte: 100, label: "50-100", color: "rgb(25, 133, 25)" }, 
            { gte: 10, lte: 49, label: "10-49", color: "rgb(185, 132, 33)" }, 
            { gte: 5, lte: 9, label: "5-9", color: "rgb(44, 197, 218)" }, 
            { lt: 5, label: "<5", color: "rgb(192, 141, 150)" },
          ],
        },
      };
      // 使用刚指定的配置项和数据显示地图数据
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initByd()
  },
}
</script>

<style>

</style>